// 图片轮播
; (function () {
    var urls = 'http://localhost/api.php/luotuo/',
        urlobj = {
            luotuohuwai: 'luotuohuwai',
            nanxie: 'nanxie',
            nanzhuang: 'nanzhaung',
            nvxie: 'nvxie',
            tongzhuang: 'tongzhuang',
            xiangbao: 'xiangbao',
            yundong: 'yundong'
        }
    var $homeAutoplayBox = $('.home-Autoplay_box'),
        homeAutoplaySpotol = $('.home-Autoplay_Spot ol'),
        homeAutoplaySpotli = $('.home-Autoplay_Spot ol li'),
        homeAutoplayBtnL = $('.home-Autoplay_BtnL'),
        homeAutoplayBtnR = $('.home-Autoplay_BtnR'),
        homeAutoplayBoxWidth = $('.home-Autoplay_box>div').width(),
        num = 0,
        headerHeight = $('.home-Header').outerHeight(true),//头部高度
        menuHeight = $('.home-Menu').outerHeight(true),//导航高度
        AutoplayHeight = $('.home-Autoplay').outerHeight(true), //图片轮播高度
        newHeight = $('.home-Conntent_Partner').outerHeight(true) + $('.home-Conntent_Recom').outerHeight(true),
        scrollHeight = headerHeight + menuHeight + AutoplayHeight + newHeight,
        hwArr = [],
        nxArr = [],
        nvxieArr = [];
    window.onload = function () {
        huXuan();
    }
    $('.home-Conntent_Out').on('click', '.hwa', function () {
        var ids = $(this).attr('ids');
        console.log(ids);
        var newData = hwArr.filter(function (item) {
            return item.id == ids
        })
        sessionStorage.setItem('newData', JSON.stringify(newData[0]))
        window.open("../html/xiangqing.html");
    })
    // 自动切换图片
    setInterval(function () {
        var xian = parseInt($homeAutoplayBox.css('margin-left'))
        if (xian % homeAutoplayBoxWidth == 0) {
            $homeAutoplayBox.animate({ marginLeft: parseInt($homeAutoplayBox.css('margin-left')) + (-homeAutoplayBoxWidth) }, 300, 'swing', function () {
                if (num >= 2) {
                    $homeAutoplayBox.css('margin-left', 0)
                }
                num++
                if (num >= homeAutoplaySpotol.find('li').length) {
                    num = 0;
                }
                homeAutoplaySpotol.find('li').eq(num).addClass('active').siblings('li').removeClass('active')
            })
        }
    }, 5000)
    // 点击下一个切换图片
    homeAutoplayBtnR.on('click', function () {
        // console.log(num);
        var xian = parseInt($homeAutoplayBox.css('margin-left'))
        if (xian % homeAutoplayBoxWidth == 0) {
            $homeAutoplayBox.animate({ marginLeft: parseInt($homeAutoplayBox.css('margin-left')) + -homeAutoplayBoxWidth }, 300, 'swing', function () {
                if (num >= 2) {
                    $homeAutoplayBox.css('margin-left', 0)
                }
                num++
                if (num >= homeAutoplaySpotol.find('li').length) {
                    num = 0;
                }
                homeAutoplaySpotol.find('li').eq(num).addClass('active').siblings('li').removeClass('active')
            })
        }
    })
    // 点击上一个切换图片
    homeAutoplayBtnL.on('click', function () {
        console.log(num);
        if (num == 0) {
            $homeAutoplayBox.css('margin-left', -homeAutoplayBoxWidth * (homeAutoplaySpotol.find('li').length))
        }
        var xian = parseInt($homeAutoplayBox.css('margin-left'))
        if (xian % homeAutoplayBoxWidth == 0) {
            $homeAutoplayBox.animate({ marginLeft: parseInt($homeAutoplayBox.css('margin-left')) + homeAutoplayBoxWidth }, 300, 'swing', function () {
                num--
                if (num < 0) {
                    num = homeAutoplaySpotol.find('li').length - 1;
                }
                homeAutoplaySpotol.find('li').eq(num).addClass('active').siblings('li').removeClass('active')
            })
        }
    })
    // 点击圆点切换图片
    homeAutoplaySpotli.on('click', function () {
        $(this).addClass('active').siblings('li').removeClass('active');
        num = $(this).index()
        $homeAutoplayBox.animate({ marginLeft: -homeAutoplayBoxWidth * $(this).index() }, 300, 'swing')
    })
    // 渲染方法
    function huXuan() {
        // 户外
        $.ajax({
            url: urls + urlobj.luotuohuwai,
            type: 'get',
            data: {
                transform: 1,
                order: 'id,asc'
            },
            success: function (res) {
                console.log(res);
                hwArr = res.luotuohuwai
                console.log(hwArr);
                for (var i = 0; i < res.luotuohuwai.length; i++) {
                    if (i <= 4) {
                        $('.home-Conntent_Out .home-Conntent_Out_banner').append('<div class="' + (i > 2 ? 'home-Conntent_Out_item4' : '') + '">'
                            + '<a href="javascript:;" class="hwa" ids="' + res.luotuohuwai[i].id + '">'
                            + '<img src="' + res.luotuohuwai[i].imgs + '" alt="">'
                            + '</a>'
                            + '</div>')
                    } else {
                        $('.home-Conntent_Out .home-Conntent_Recom_list').append('<li class="' + (i % 4 == 0 ? 'noMargin' : '') + '">'
                            + '<a href="javascript:;" class="hwa" ids="' + res.luotuohuwai[i].id + '">'
                            + '<div class="home-Conntent_Recom_list_clothes">'
                            + '<img src="' + res.luotuohuwai[i].imgs + '" alt="">'
                            + '</div>'
                            + '<div class="home-Conntent_Recom_list_jieshao">'
                            + '<p class="fu15"></p>'
                            + '<p class="home-Conntent_Recom_list_newpin">2019新品</p>'
                            + '<p class="home-Conntent_Recom_list_newpin2" title="' + res.luotuohuwai[i].goodsName + '">' + res.luotuohuwai[i].goodsName + '</p>'
                            + '<p class="home-Conntent_Recom_list_newpin3">￥' + res.luotuohuwai[i].yuanjia + '</p>'
                            + '</div>'
                            + '</a>'
                            + '</li>')
                    }
                }
            }
        })
        // 男鞋
        $.ajax({
            url: urls + urlobj.nanxie,
            type: 'get',
            data: {
                transform: 1,
                order: 'id,asc'
            },
            success: function (res) {
                console.log(res);
                for (var i = 0; i < res.nanxie.length; i++) {
                    if (i <= 4) {
                        $('.home-Conntent_MenShoes .home-Conntent_Out_banner').append('<div class="' + (i > 2 ? 'home-Conntent_Out_item4' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<img src="' + res.nanxie[i].imgs + '" alt="">'
                            + '</a>'
                            + '</div>')
                    } else {
                        $('.home-Conntent_MenShoes .home-Conntent_Recom_list').append('<li class="' + (i % 4 == 0 ? 'noMargin' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<div class="home-Conntent_Recom_list_clothes">'
                            + '<img src="' + res.nanxie[i].imgs + '" alt="">'
                            + '</div>'
                            + '<div class="home-Conntent_Recom_list_jieshao">'
                            + '<p class="fu15"></p>'
                            + '<p class="home-Conntent_Recom_list_newpin">2019新品</p>'
                            + '<p class="home-Conntent_Recom_list_newpin2" title="' + res.nanxie[i].goodsName + '">' + res.nanxie[i].goodsName + '</p>'
                            + '<p class="home-Conntent_Recom_list_newpin3">￥' + res.nanxie[i].yuanjia + '</p>'
                            + '</div>'
                            + '</a>'
                            + '</li>')
                    }

                }
            }
        })
        // 女鞋
        $.ajax({
            url: urls + urlobj.nvxie,
            type: 'get',
            data: {
                transform: 1,
                order: 'id,asc'
            },
            success: function (res) {
                console.log(res);
                for (var i = 0; i < res.nvxie.length; i++) {
                    if (i <= 4) {
                        $('.home-Conntent_WomanShoes .home-Conntent_Out_banner').append('<div class="' + (i > 2 ? 'home-Conntent_Out_item4' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<img src="' + res.nvxie[i].imgs + '" alt="">'
                            + '</a>'
                            + '</div>')
                    } else {
                        $('.home-Conntent_WomanShoes .home-Conntent_Recom_list').append('<li class="' + (i % 4 == 0 ? 'noMargin' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<div class="home-Conntent_Recom_list_clothes">'
                            + '<img src="' + res.nvxie[i].imgs + '" alt="">'
                            + '</div>'
                            + '<div class="home-Conntent_Recom_list_jieshao">'
                            + '<p class="fu15"></p>'
                            + '<p class="home-Conntent_Recom_list_newpin">2019新品</p>'
                            + '<p class="home-Conntent_Recom_list_newpin2" title="' + res.nvxie[i].goodsName + '">' + res.nvxie[i].goodsName + '</p>'
                            + '<p class="home-Conntent_Recom_list_newpin3">￥' + res.nvxie[i].yuanjia + '</p>'
                            + '</div>'
                            + '</a>'
                            + '</li>')
                    }

                }
            }
        })
        // 男装
        $.ajax({
            url: urls + urlobj.nanzhuang,
            type: 'get',
            data: {
                transform: 1,
                order: 'id,asc'
            },
            success: function (res) {
                console.log(res);
                for (var i = 0; i < res.nanzhaung.length; i++) {
                    if (i <= 4) {
                        $('.home-Conntent_MenWear .home-Conntent_Out_banner').append('<div class="' + (i > 2 ? 'home-Conntent_Out_item4' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<img src="' + res.nanzhaung[i].imgs + '" alt="">'
                            + '</a>'
                            + '</div>')
                    } else {
                        $('.home-Conntent_MenWear .home-Conntent_Recom_list').append('<li class="' + (i % 4 == 0 ? 'noMargin' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<div class="home-Conntent_Recom_list_clothes">'
                            + '<img src="' + res.nanzhaung[i].imgs + '" alt="">'
                            + '</div>'
                            + '<div class="home-Conntent_Recom_list_jieshao">'
                            + '<p class="fu15"></p>'
                            + '<p class="home-Conntent_Recom_list_newpin">2019新品</p>'
                            + '<p class="home-Conntent_Recom_list_newpin2" title="' + res.nanzhaung[i].goodsName + '">' + res.nanzhaung[i].goodsName + '</p>'
                            + '<p class="home-Conntent_Recom_list_newpin3">￥' + res.nanzhaung[i].yuanjia + '</p>'
                            + '</div>'
                            + '</a>'
                            + '</li>')
                    }

                }
            }
        })
        // 运动瑜伽
        $.ajax({
            url: urls + urlobj.yundong,
            type: 'get',
            data: {
                transform: 1,
                order: 'id,asc'
            },
            success: function (res) {
                console.log(res);
                for (var i = 0; i < res.yundong.length; i++) {
                    if (i <= 4) {
                        $('.home-Conntent_Runing .home-Conntent_Out_banner').append('<div class="' + (i > 2 ? 'home-Conntent_Out_item4' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<img src="' + res.yundong[i].imgs + '" alt="">'
                            + '</a>'
                            + '</div>')
                    } else {
                        $('.home-Conntent_Runing .home-Conntent_Recom_list').append('<li class="' + (i % 4 == 0 ? 'noMargin' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<div class="home-Conntent_Recom_list_clothes">'
                            + '<img src="' + res.yundong[i].imgs + '" alt="">'
                            + '</div>'
                            + '<div class="home-Conntent_Recom_list_jieshao">'
                            + '<p class="fu15"></p>'
                            + '<p class="home-Conntent_Recom_list_newpin">2019新品</p>'
                            + '<p class="home-Conntent_Recom_list_newpin2" title="' + res.yundong[i].goodsName + '">' + res.yundong[i].goodsName + '</p>'
                            + '<p class="home-Conntent_Recom_list_newpin3">￥' + res.yundong[i].yuanjia + '</p>'
                            + '</div>'
                            + '</a>'
                            + '</li>')
                    }

                }
            }
        })
        // 童装
        $.ajax({
            url: urls + urlobj.tongzhuang,
            type: 'get',
            data: {
                transform: 1,
                order: 'id,asc'
            },
            success: function (res) {
                console.log(res);
                for (var i = 0; i < res.tongzhuang.length; i++) {
                    if (i <= 4) {
                        $('.home-Conntent_ChildrenShoes .home-Conntent_Out_banner').append('<div class="' + (i > 2 ? 'home-Conntent_Out_item4' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<img src="' + res.tongzhuang[i].imgs + '" alt="">'
                            + '</a>'
                            + '</div>')
                    } else {
                        $('.home-Conntent_ChildrenShoes .home-Conntent_Recom_list').append('<li class="' + (i % 4 == 0 ? 'noMargin' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<div class="home-Conntent_Recom_list_clothes">'
                            + '<img src="' + res.tongzhuang[i].imgs + '" alt="">'
                            + '</div>'
                            + '<div class="home-Conntent_Recom_list_jieshao">'
                            + '<p class="fu15"></p>'
                            + '<p class="home-Conntent_Recom_list_newpin">2019新品</p>'
                            + '<p class="home-Conntent_Recom_list_newpin2" title="' + res.tongzhuang[i].goodsName + '">' + res.tongzhuang[i].goodsName + '</p>'
                            + '<p class="home-Conntent_Recom_list_newpin3">￥' + res.tongzhuang[i].yuanjia + '</p>'
                            + '</div>'
                            + '</a>'
                            + '</li>')
                    }

                }
            }
        })
        // 童装
        $.ajax({
            url: urls + urlobj.xiangbao,
            type: 'get',
            data: {
                transform: 1,
                order: 'id,asc'
            },
            success: function (res) {
                console.log(res);
                for (var i = 0; i < res.xiangbao.length; i++) {
                    if (i <= 4) {
                        $('.home-Conntent_ACC .home-Conntent_Out_banner').append('<div class="' + (i > 2 ? 'home-Conntent_Out_item4' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<img src="' + res.xiangbao[i].imgs + '" alt="">'
                            + '</a>'
                            + '</div>')
                    } else {
                        $('.home-Conntent_ACC .home-Conntent_Recom_list').append('<li class="' + (i % 4 == 0 ? 'noMargin' : '') + '">'
                            + '<a href="javascript:;">'
                            + '<div class="home-Conntent_Recom_list_clothes">'
                            + '<img src="' + res.xiangbao[i].imgs + '" alt="">'
                            + '</div>'
                            + '<div class="home-Conntent_Recom_list_jieshao">'
                            + '<p class="fu15"></p>'
                            + '<p class="home-Conntent_Recom_list_newpin">2019新品</p>'
                            + '<p class="home-Conntent_Recom_list_newpin2" title="' + res.xiangbao[i].goodsName + '">' + res.xiangbao[i].goodsName + '</p>'
                            + '<p class="home-Conntent_Recom_list_newpin3">￥' + res.xiangbao[i].yuanjia + '</p>'
                            + '</div>'
                            + '</a>'
                            + '</li>')
                    }
                }
            }
        })
    }
}())